<template>
<div>
  <div class="panel-head">
    <van-row>
      <van-col span="9">退款原因</van-col>
      <van-col span="6" class="text-center">退款金额</van-col>
      <van-col span="9" class="text-right">状态</van-col>
    </van-row>
  </div>
  <ul class="panel-list bord" v-if="list && list.length > 1">
    <li
      class="pd-all"
      v-for="item in list"
      :key="item.refund_id"
      @click="showDetail(item.refund_id)"
    >
      <van-row>
        <van-col span="9" class="van-ellipsis">{{item.reason || '-'}}</van-col>
        <van-col span="6" class="text-center">￥{{item.refund_amount}}</van-col>
        <van-col span="9" :class="['text-right', getStatusClass(item.state)]">{{item.state_name}}</van-col>
      </van-row>
      <van-row class="font-sm c-gray">
        <van-col span="12">
          退款数量：{{item.qty}}&nbsp;
          手续费：{{item.fee}}
        </van-col>
        <van-col span="12" class="text-right">{{item.created_at}}</van-col>
      </van-row>
    </li>
  </ul>
</div>
</template>

<script>
import {
  Icon,
  Button,
  Row,
  Col,
  Toast,
  Dialog,
} from 'vant'
import NavBar from "@cmpt/header/navbar"
import {
  getRefundList,
  cancelRefund,
} from "@api/modules/order"

import {
  REFUND_STATE_LIST,
} from '@data/dic/order'

export default {
  name: 'refund-detail-list',
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Row.name]: Row,
    [Col.name]: Col,

    NavBar,
  },
  props: {
    list: {
      type: Array,
      default: []
    },
  },
  data() {
    return {
      order_no: this.$getUrlParam('order_no') || '',
      sku_id: this.$getUrlParam('sku_id') || '',
      id: this.$getUrlParam('id') || '',
    }
  },

  computed: {},

  methods: {
    getStatusClass(status) {
      const obj = REFUND_STATE_LIST.find((item) => {
        return item.key == status
      })
      return obj ? 'c-' + obj.styleType : ''
    },

    showDetail(id) {
      this.$goPage('refund/detail', {
        id: id,
      })
    }
  },
}
</script>

<style lang="less" src="@style_m/components/panel.less"></style>
<style lang="less" src="@style_m/mod/order-detail.less"></style><style lang="less" scoped>
@import "~@style_m/basic/utils/index";

.panel-head {
  background: @color-bg-light;
}
</style>
